<template>
	<uni-popup ref="popupRef">
		<view class="content">
			<view class="title"> {{ title }} </view>
			<view class="input" v-if="input">
				<input v-model="inputVal" type="text" :placeholder="input" placeholder-style="color: #999999;font-size: 15px;" />
			</view>
			<view class="textarea" v-if="textarea">
				<textarea v-model="inputVal" :placeholder="textarea" placeholder-style="color: #999999;font-size: 15px;" />
			</view>
			<view class="tips" v-if="tips"> {{ tips }} </view>
			<view class="btn-box">
				<view class="btn" @tap="close"> 取消 </view>
				<view class="btn confirm" @tap="emit('confirm', inputVal)"> 确定 </view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue';
	const emit = defineEmits(['confirm'])
	defineProps({
		title: {
			type: String,
			default: '提示'
		},
		tips: {
			type: String,
			default: ''
		},
		input: {
			type: String,
			default: ''
		},
		textarea: {
			type: String,
			default: ''
		}
	})
	const popupRef = ref()
	const inputVal = ref('')
	const open = () => {
		popupRef.value.open()
	}
	const close = () => {
		popupRef.value.close()
		inputVal.value = ''
	}
	// const confirm = () => {
	// 	emit('confirm', inputVal.value)
	// }
	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.content {
		width: 270px;
		padding-top: 20px;
		border-radius: 10px;
		text-align: center;
		box-sizing: border-box;
		background-color: #FFFFFF;
		.title {
			color: #333333;
			font-size: 17px;
			padding: 0 16px;
			font-weight: 500;
			line-height: 24px;
			margin-bottom: 4px;
		}
		.input {
			height: 50px;
			margin: 16px 12px 20px;
			background: #EEEEEE;
			border-radius: 5px 5px 5px 5px;
			input {
				width: 100%;
				height: 100%;
				color: #333333;
				font-size: 15px;
				font-weight: 400;
				text-align: left;
				padding: 0 10px;
				box-sizing: border-box;
			}
		}
		.textarea {
			height: 133px;
			margin: 4px 16px 10px;
			background: #EEEEEE;
			border-radius: 5px 5px 5px 5px;
			textarea {
				width: 100%;
				height: 100%;
				padding: 10px;
				color: #333333;
				font-size: 15px;
				font-weight: 400;
				text-align: left;
				line-height: 21px;
				box-sizing: border-box;
			}
		}
		.tips {
			color: #666666;
			font-size: 15px;
			padding: 0 16px;
			font-weight: 400;
			line-height: 21px;
			margin-bottom: 20px;
		}
		.btn-box {
			height: 44px;
			display: flex;
			box-sizing: border-box;
			border-top: 1px solid #eeeeee;
			.btn {
				flex: 1;
				color: #333333;
				font-size: 16px;
				font-weight: 400;
				line-height: 44px;
			}
			.confirm {
				color: #FF3B1E;
				border-left: 1px solid #eeeeee;
			}
		}
	}
</style>